<template>
  <div>{{props.moduleId}}-{{props.actionId}}
    <br>
    <!--表单-->
    <nf-el-form
      v-formdrag="formInfo"
      v-model="model"
      :partModel="partModel"
      v-bind="formMeta"
    >
    </nf-el-form>
    <span class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="mysubmit">确 定</el-button>
    </span>
  </div>
</template>

<script>
  import { computed, reactive, watch, ref, onMounted, nextTick } from 'vue'
  import { ElMessage } from 'element-plus'

  // 状态
  import { state } from 'nf-state'

  import formManage from '../../controller/ctl-form.js'

  // 新的列表页面的管理类
  import { getList } from '../../controller/data-list-controller.js'
  // 表单组件
  import nfElForm from '/ctrl/nf-el-form/el-form-div.vue'

  // table 的拖拽相关
  import manageForm from '../../control-web/nf-meta-manage/formManage.js'

</script>

<script setup>

  // 定义属性
  const props = defineProps({
    moduleId: [Number, String], // 模块ID
    actionId: [Number, String], // 提交给后端API的actionID
    openModuleId: [Number, String], // 打开窗口的模块ID
    formMetaId: [Number, String], // 表单的metaID
    dataId: Number, // 修改或者显示的记录的ID
    type: String, // 类型：添加弹窗、其他弹窗、删除
    dialogInfo: Object // 可以关闭弹窗
  })

  const _dialogInfo = props.dialogInfo

  // 模块ID + 表单ID = 自己的标志
  const modFormId = computed(() => props.moduleId.toString() + props.formMetaId.toString())

  // 子组件里面获取状态 modFormId.value
  const dataListState = getList()

  // 表单控件的 model
  const model = reactive({})
  // 定义局部的 model
  const partModel = reactive({})

  const {
    changeFormDataId,
    mySubmit
  } = formManage(props, model)

  // 表单用的 meta
  const formMeta = state.projectMeta.module[props.moduleId].forms[modFormId.value]
  formMeta.events = {
    reset: () => {}
  }

  // mod模式下面，需要添加数据
  const isAdd = ref(true)
  // 监听记录ID的变化，加载数据便于修改
  changeFormDataId(formMeta, isAdd)

  // 提交数据
  const mysubmit = () => {
    mySubmit(dataListState, isAdd)
  }

  // 关闭
  const close = () => {
    _dialogInfo.isShow = false
  }

  // 拖拽部分=============================
  // table 的拖拽功能
  const formInfo = {
    setFormforDrag: () => {
      console.log('原始的获取td的函数')
    },
    tdClick: (info) => {
      console.log('原始的单击事件', info)
    }
  }

  const dragInfo = reactive({
    offsetX: 0,
    isLeft: true, // 是否在 th 的左侧结束拖拽
    ctrl: false, // 是否按下了ctrl
    source: '',
    target: '',
    sourceIndex: 0, // 开始拖拽的位置
    targetIndex: 0 // 结束拖拽的位置
  })
  const { setLabelOrder } = manageForm(formMeta, dragInfo, formInfo)

  watch(() => dragInfo, () => {
          setLabelOrder()
          console.log('表单的拖拽信息：', dragInfo)
          console.log('formMeta ', formMeta)
        },
        { deep: true }
  )

  onMounted(() => {
    nextTick(() => {
      formInfo.setFormforDrag(dragInfo)
    })
  })
</script>
